{% raw %}
    {% extends "base_settings.html" %}
    {% load
{% endraw -%}
{{ cookiecutter.project_slug }}{%- raw -%}_utils_math %}
{% load
{% endraw -%}
{{ cookiecutter.project_slug }}{%- raw -%}_utils_timestamp %}
{% block head %}
    <title>Billing and plans -
    {% endraw -%}
{{ cookiecutter.project_name }}{%- raw -%}</title>
<meta name="robots" content="noindex,nofollow">
{% endblock %}
{% block main %}
    <div>
        <div>
            <h1 class="text-2xl md:text-3xl font-semibold text-gray-900">Billing and plans</h1>
        </div>
        <div class="mt-12">
            <div>
                <h3 class="text-xl md:text-2xl font-semibold text-gray-900">Plans</h3>
            </div>
            <div class="mt-4 grid grid-cols-1 gap-x-4 gap-y-4 md:grid-cols-3">
                <div class="rounded border-2 border-gray-200 bg-white p-4">
                    <dt>
                        <p class="text-sm font-normal text-gray-500">Your current plan</p>
                    </dt>
                    <dd class="flex items-baseline">
                        <p class="text-base font-medium text-gray-900">
                            {% if request.user.subscription.status == "trialing" %}
                                Free trial
                            {% else %}
                                {{ request.user.subscription.items.data.0.price.unit_amount|div:100|floatformat:"0" }} €
                            {% endif %}
                        </p>
                    </dd>
                    <div>
                        {% if request.user.subscription.cancel_at_period_end %}
                            <form action="{% url '{%- endraw -%}{{ cookiecutter.project_slug }}{%- raw -%}-billing:reactivate-subscription' %}?success=/settings/billing/"
                                  method="post">
                                {% csrf_token %}
                                <input type="submit"
                                       value="Reactivate subscription"
                                       class="text-xs text-blue-600 hover:text-gray-800 font-semibold underline"/>
                            </form>
                        {% else %}
                            <form action="{% url '{%- endraw -%}{{ cookiecutter.project_slug }}{%- raw -%}-billing:cancel-subscription' %}?success=/settings/billing/"
                                  method="post">
                                {% csrf_token %}
                                <input type="submit"
                                       value="Cancel susbcription"
                                       class="text-xs text-blue-600 hover:text-gray-800 font-semibold underline"/>
                            </form>
                        {% endif %}
                    </div>
                </div>
                <div class="rounded border-2 border-gray-200 bg-white p-4">
                    <dt>
                        <p class="text-sm font-normal text-gray-500">
                            {% if request.user.subscription.status == "trialing" %}
                                Free trial ends
                            {% elif request.user.subscription.cancel_at_period_end %}
                                Current subscription ends
                            {% else %}
                                Next payment due
                            {% endif %}
                        </p>
                    </dt>
                    <dd class="flex flex-col items-baseline">
                        <p class="text-base font-medium text-gray-900">
                            {% if request.user.subscription.current_period_end is not None %}
                                {{ request.user.subscription.current_period_end|timestamp_to_datetime|date }}
                            {% else %}
                                -
                            {% endif %}
                        </p>
                        {% if request.user.subscription.cancel_at_period_end %}
                            <p class="mt-1 text-xs font-medium text-gray-700">* It won't renew</p>
                        {% endif %}
                    </dd>
                </div>
                <div class="rounded border-2 border-gray-200 bg-white p-4">
                    <dt>
                        <p class="text-sm font-normal text-gray-500">Payment method</p>
                    </dt>
                    <dd class="flex items-baseline">
                        <p class="text-base font-medium text-gray-900">
                            {% if request.user.default_payment_method is not None %}
                                {{ request.user.default_payment_method.card.brand|title }} ****{{ request.user.default_payment_method.card.last4 }}
                            {% else %}
                                -
                            {% endif %}
                        </p>
                    </dd>
                    <div>
                        <button id="add_payment_method_button"
                                class="text-xs text-blue-600 hover:text-gray-800 font-semibold underline">
                            {% if request.user.default_payment_method is not None %}
                                Update payment method
                            {% else %}
                                Add payment method
                            {% endif %}
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-12">
            <div>
                <h3 class="text-xl md:text-2xl font-semibold text-gray-900">Billing information</h3>
            </div>
            <form action="{% url '{%- endraw -%}{{ cookiecutter.project_slug }}{%- raw -%}-billing:billing-settings' %}"
                  method="post"
                  class="mt-4 rounded border-2 border-gray-200 bg-white">
                {% csrf_token %}
                <div class="p-4 md:p-10">
                    <div class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">{{ form }}</div>
                    <div class="pt-6 flex flex-row justify-end">
                        <input type="submit" value="Update" class="ml-3 btn btn-primary btn-small"/>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript">
        let addPaymentMethodButton = document.getElementById("add_payment_method_button")

        if (addPaymentMethodButton !== null) {
            addPaymentMethodButton.addEventListener("click", () => {
                fetch("/billing/subscribe-checkout/create/?success=/settings/billing/&cancel=/settings/billing/")
                    .then((result) => { return result.json(); })
                    .then((data) => {
                        return stripe.redirectToCheckout({sessionId: data.checkout_session_id})
                    })
                    .then((res) => {});
            })
        }
    </script>
{% endblock %}
{% endraw %}